<template>
	<view class="container">
		<uni-list :border="true">
			<uni-list-chat v-for="(item,index) in list" :key="index" :avatarCircle="true" :avatar="item.avatarURL"
				:note="item.number" :title="item.name" :clickable="true" @click="handleClick(item)">
				<view style="line-height: 60rpx;">
					<text class="iconfont icon-nan" v-if="item.sex==='0'"
						style="background-color: #184795;color: white;border-radius: 50%;font-size: 30rpx;padding: 5rpx;"></text>
					<text class="iconfont icon-nv" v-else
						style="background-color: #dd585a;color: white;border-radius: 50%;font-size: 30rpx;padding: 5rpx;"></text>
				</view>
			</uni-list-chat>
		</uni-list>
		<uni-load-more v-if="!noMore"></uni-load-more>
		<view class="no-more" v-else>没有更多啦……</view>
	</view>
	<Loading />
</template>

<script setup>
	import {
		GetContactList
	} from "@/apis/user.js"
	import {
		onBeforeMount,
		ref
	} from "vue";
	import {
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	import Loading from "@/components/Loading.vue";

	const list = ref([]);
	const noMore = ref(false);
	const page = ref(1);
	const limit = ref(12);
	const showSearch = ref(false);
	const searchText = ref("");
	const confirmSearchText = ref("");
	const searchResult = ref(null);
	const searchCount = ref(0);

	onBeforeMount(() => {
		refresh();
	})

	function handleClick(e) {
		uni.navigateTo({
			url: `/pages/my/contact/detail/detail?userId=${e.userID}`
		})
	}

	function getMoreList() {
		noMore.value = false;
		GetContactList({
			page: page.value,
			limit: limit.value
		}).then(res => {
			if (res.data === null) {
				noMore.value = true;
				return;
			}
			let newlist = res.data;
			list.value = list.value.concat(newlist);
			page.value++;
		})
	}

	function refresh() {
		searchText.value = confirmSearchText.value = "";
		searchResult.value = null;
		showSearch.value = false;
		getMoreList();
	}

	onReachBottom(() => {
		if (!noMore.value)
			getMoreList();
	})

	onPullDownRefresh(async () => {
		await refresh();
		await uni.stopPullDownRefresh();
	})
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 20rpx;
	}

	.no-more {
		text-align: center;
		font-size: 24rpx;
		margin-top: 20rpx;
		color: #666;
	}
</style>
